
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { BOOKS } from '../mock-books';
import BookDetail from './BookDetail';
export default class Books extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            selectedBook: {
                id: '',
                name: ''
            }
        };
    }

    onInputChange(val) {
        const index = BOOKS.findIndex((item) => item.id == this.state.selectedBook.id)
        BOOKS[index] = { id: this.state.selectedBook.id, name: val };
        this.setState({
            selectedBook: { id: this.state.selectedBook.id, name: val }
        });
    }

    onListItemPressed(item) {
        this.setState({ selectedBook: item });
    }

    render() {
        return (
            <View style={styles.container}>
                <List style={styles.list}>
                    {
                        BOOKS.map((l) => (
                            <ListItem
                                key={l.id}
                                title={l.name}
                                onPress={this.onListItemPressed.bind(this, l)}
                            />
                        ))
                    }
                </List>
                <BookDetail selectedBook={this.state.selectedBook} onInputChange={this.onInputChange.bind(this)}></BookDetail>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#F5FCFF',
    },
    list: {
        marginBottom: 20
    }
});
